<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>flyingon布局演示</title>
    <link rel="stylesheet" type="text/css" href="../css/default/flyingon.css" />
    <style type="text/css">

    html, body {
        margin:0;
        border:0;
        padding:0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    </style>
    <script type="text/javascript" src="../js/flyingon.js"></script>
</head>
<body>

    <div id="host" style="height:400px;"></div>
    
    <script type="text/javascript">
        
        
        flyingon.layout('wall', {

            type: 'table',
            spacingX: 2,
            spacingY: 2,
            data: '*[* * * * * * * *] *[50* * * * * * * * 50*] *[* * * * * * * *]'      
        });


        flyingon.layout('panel', [

            {
                type: 'dock',
                spacingX: 10,
                spacingY: 10,
                //rtl: true,

                //子布局
                sublayouts: [

                    {
                        scale: 25,
                        dock: 'top',
                        height: 40,
                        layout: 'wall'
                    },

                    {
                        scale: 25,
                        dock: 'bottom',
                        height: 40,
                        layout: 'wall'
                    },

                    {
                        dock: 'fill',

                        layout: {

                            type: 'uniform',
                            size: 10,

                            location: function (container, item, index) {

                                var height = container.arrangeHeight,
                                    value = Math.sin(58.648 * (index + 1) / Math.PI);

                                if (value < 0)
                                {
                                    value = -value;
                                }

                                this.alignY = 'bottom';
                                this.height = value * height / 2 | 0;
                            }
                        }
                    }

                ]
            },

            {
                condition: { width: [0, 250] },
                type: 'vertical-line',
                spacingY: 2
            },

            {
                condition: { width: [251, 500] },
                type: 'flow',
                spacingX: 2,
                spacingY: 2
            },

            {
                condition: { width: [501, 800] },
                type: 'table',
                spacingX: 2,
                spacingY: 2,
                data: '20[* * *] *[* *{(50% 50%)L*[* * *]^3} *] 20[* * *]',
                auto: 2
            }

        ]);



        var panel = flyingon.ui({

            Class: 'Panel',
            border: 1,
            padding: 8,
            resizable: 'all',
            layout: 'panel',
            style: 'border:1px solid',

            children: function (list) {

                for (var i = 0; i < 101; i++)
                {
                    list.push({

                        Class: 'Control',
                        id: i,
                        border: 1,
                        style: 'border:1px solid;'
                    });
                }
            }
        });


        panel.on('move-end', function (e) {
           
            e.target.style('background-color', 'silver');
        });


        flyingon.show(panel, 'host');


    </script>

</body>
</html>